<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css"
      type="text/css"
    />
    <style>
      .map {
        height: 800px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.BingMaps({
              key:
                "AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ",
              imagerySet: "Road"
            })
          }),
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            //这是一个能选择的地图源
            source: new ol.source.Vector({
              url:
                "https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson",
              format: new ol.format.GeoJSON()
            })
          }),
        ],
        target: "map",
        view: new ol.View({
          center: ol.proj.fromLonLat([121.48, 31.22]),
          zoom: 5
        })
      });
    </script>
  </body>
</html>
